<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: #222;
		}

		.scene {
			width: 1000px;
			display: flex;
			justify-content: space-between;
			perspective: 800px;
		}

		.card:hover {
			transform: rotateY(0.5turn);
		}

		.card {
			position: relative;
			width: 240px;
			height: 300px;
			color: white;
			cursor: pointer;
			transition: 1s ease-in-out;
			transform-style: preserve-3d;
		}

		.card__face {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			backface-visibility: hidden;
			transition: 1s ease-in-out;
			-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
		}

		.card__face --back {
			transform: rotateY(0.5turn);
		}
		.card__face img {
			width: 240px;
			height: 300px;
			object-fit: cover;
		}
	</style>
	<div class="scene">
		<div class="card">
			<div class="card__face card__face--front">
				<img src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" />
			</div>
			<div class="card__face card__face--back">
				<img src="https://i.loli.net/2019/11/16/cqyJiYlRwnTeHmj.jpg" />
			</div>
		</div>
		<div class="card">
			<div class="card__face card__face--front">
				<img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" />
			</div>
			<div class="card__face card__face--back">
				<img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" />
			</div>
		</div>
		<div class="card">
			<div class="card__face card__face--front">
				<img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" />
			</div>
			<div class="card__face card__face--back">
				<img src="https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg" />
			</div>
		</div>
	</div>

	<body>
	</body>
</html>
